import React, { useState, useEffect } from "react";
import Taro from '@tarojs/taro'
import { Space } from '@/components/UiComponents'
import { backgroundObj } from '@/utils/utils'
import { AtFloatLayout, } from 'taro-ui'
import { View, Picker, Text, Button } from '@tarojs/components'
import "taro-ui/dist/style/components/float-layout.scss";
import "./index.scss";

export default (props) => {
    const { visible = {}, onClose } = props;
    const { show = false, detail } = visible
    const [data, setData] = useState({})
    useEffect(() => {
        if (!show) {
            setData({})
        }
        else {
            const { expressRecord = '{}' } = detail

            setData(JSON.parse(expressRecord))
        }
    }, [show])
    const { logo, expName, courierPhone, list = [] } = data
    if (show) {
        return (
            <AtFloatLayout
                title={'物流信息'}
                onClose={() => onClose()}
                isOpened={show}>
                <View>
                    <View className="expressTemplate_title">
                        <View className="expressTemplate_title_left">
                            <Space align={'center'}>
                                <View style={backgroundObj(logo)} className="expressTemplate_title_logo">

                                </View>
                                <View className="expressTemplate_title_name">
                                    {expName}
                                </View>
                            </Space>

                        </View>
                        <View className="expressTemplate_title_right">
                            <View onClick={() => {
                                Taro.makePhoneCall({
                                    phoneNumber: courierPhone
                                })
                            }} style={{ color: '#1677ff' }}>拨打电话:{courierPhone}</View>
                        </View>
                    </View>
                    <View className="expressTemplate_steps">
                        {list.map((item, index) => {
                            const { status, time } = item
                            console.log(item)
                            if (index === 0) {
                                return <View className="adm-step adm-step-status-process">
                                    <View className="adm-step-indicator">
                                        <View className="adm-step-icon-container">
                                            <View className="adm-step-icon-dot"></View>
                                        </View>
                                    </View>
                                    <View className="adm-step-content">
                                        <View className="adm-step-title">{status}</View>
                                        <View className="adm-step-description">{time}</View>
                                    </View>
                                </View>
                            } else {
                                return <View className="adm-step adm-step-status-wait">
                                    <View className="adm-step-indicator">
                                        <View className="adm-step-icon-container">
                                            <View className="adm-step-icon-dot"></View>
                                        </View>
                                    </View>
                                    <View className="adm-step-content">
                                        <View className="adm-step-title">{status}</View>
                                        <View className="adm-step-description">{time}</View>
                                    </View>
                                </View>
                            }
                        })}
                    </View>

                </View>
            </AtFloatLayout>

        );
    }
    else {
        return null
    }

};
